<div class="row">
  <div data-hook="admin_variant_form_fields" class="col-12 col-md-6">
    <div data-hook="variants">
      <% @product.option_types.each do |option_type| %>
        <div class="form-group" data-hook="presentation">
          <%= label :new_variant, option_type.presentation %>
          <% if option_type.name == 'color' %>
            <%= f.collection_select 'option_value_ids', option_type.option_values, :id, :name,
              { include_blank: true }, { name: 'variant[option_value_ids][]', class: 'select2-clear', id: "option_value_ids-#{option_type.id}" } %>
          <% else %>
            <%= f.collection_select 'option_value_ids', option_type.option_values, :id, :presentation,
              { include_blank: true }, { name: 'variant[option_value_ids][]', class: 'select2-clear', id: "option_value_ids-#{option_type.id}"  } %>
          <% end %>
        </div>
      <% end %>

      <div class="form-group" data-hook="sku">
        <%= f.label :sku, Spree.t(:sku) %>
        <%= f.text_field :sku, class: 'form-control' %>
      </div>

      <div class="form-group" data-hook="price">
        <%= f.label :price, Spree.t(:price) %>
        <%= f.text_field :price, value: number_to_currency(@variant.price, unit: ''), class: 'form-control' %>
      </div>

      <div class="form-group" data-hook="compare_at_price">
        <%= f.label :compare_at_price, Spree.t(:compare_at_price) %>
        <%= f.text_field :compare_at_price, value: number_to_currency(@variant.compare_at_price, unit: ''), class: 'form-control' %>
      </div>

      <div class="form-group" data-hook="cost_price">
        <%= f.label :cost_price, Spree.t(:cost_price) %>
        <%= f.text_field :cost_price, value: number_to_currency(@variant.cost_price, unit: ''), class: 'form-control' %>
      </div>

      <div class="form-group" data-hook="tax_category">
        <%= f.label :tax_category_id, Spree.t(:tax_category) %>
        <%= f.collection_select(:tax_category_id, @tax_categories, :id, :name, { include_blank: Spree.t('match_choices.none') }, { class: 'select2' }) %>
      </div>

      <div class="form-group" data-hook="discontinue_on">
          <%= f.label :discontinue_on, Spree.t(:discontinue_on) %>
          <%= f.error_message_on :discontinue_on %>
          <div class="input-group datepicker"
               data-wrap="true"
               data-alt-format="<%= Spree.t(:fpr_human_friendly_date_format, scope: 'date_picker', default: 'M j, Y') %>">
            <%= f.text_field :discontinue_on,
                             value: datepicker_field_value(@variant.discontinue_on),
                             placeholder: Spree.t(:select_a_date),
                             class: 'form-control shadow-none',
                             'data-input':'' %>

            <%= render partial: 'spree/admin/shared/cal_close' %>
          </div>
      </div>
    </div>
  </div>

  <div class="col-12 col-md-6" data-hook="admin_variant_form_additional_fields">
    <% [:weight, :height, :width, :depth].each do |field| %>
      <div class="form-group" data-hook="<%= field %>"><%= f.label field, Spree.t(field) %>
        <% value = number_with_precision(@variant.send(field), precision: 2) %>
        <%= f.text_field field, value: value, class: 'form-control' %>
      </div>
    <% end %>
  </div>
</div>
